<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-input
          v-model="query.roleName"
          placeholder="请输入角色名称查询"
          class="handle-input mr10"
          clearable
        ></el-input>
        <el-button type="primary" :icon="Search" @click="handleSearch"
          >搜索</el-button
        >
        <el-button type="primary" :icon="Plus" @click="openDialog('add')"
          >新增</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column prop="roleName" align="center" label="角色名称"></el-table-column>
        <el-table-column prop="roleSign" align="center" label="角色标识"></el-table-column>
        <el-table-column prop="remark" align="center" label="备注"></el-table-column>
        <el-table-column prop="gmtCreate" align="center" label="创建时间">
          <template v-slot="scope">
            <span>{{scope.row.gmtCreate || '-'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="scope">
            <el-button type="text" :icon="Edit" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="text" :icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
      :title="dialogTitle"
      v-model="visible"
      width="30%"
      style="z-index: 900"
    >
      <el-form label-width="120px" ref="formRef" :model="form" :rules="rules">
        <el-form-item prop="roleName" label="角色名称">
          <el-input v-model="form.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item prop="roleSign" label="角色标识">
          <el-input v-model="form.roleSign" placeholder="多个用逗号分隔,如: admin,guest"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" :rows="5" resize="none" v-model="form.remark" placeholder="请输入备注"></el-input>
        </el-form-item>
<!--        <el-form-item prop="orgId" label="组织区域">
          <el-select
            v-model="form.orgId"
            class="m-2"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in orgList"
              :key="item.orgId"
              :label="item.name"
              :value="item.orgId"
            />
          </el-select>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitForm(formRef)"
            :loading="saveLoading"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

<!--    <el-dialog
      title="重置密码"
      v-model="passwordVisible"
      width="30%"
      style="z-index: 900"
    >
      <el-form
        label-width="120px"
        ref="formRef2"
        :model="passwordForm"
        :rules="rules2"
      >
        <el-form-item prop="username" label="用户名">
          <el-input
            v-model="passwordForm.username"
            placeholder="请输入"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item prop="oldPassword" label="旧密码">
          <el-input
            v-model="passwordForm.oldPassword"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password" label="新密码">
          <el-input
            v-model="passwordForm.password"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password2" label="再次输入密码">
          <el-input
            v-model="passwordForm.password2"
            type="password"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="passwordVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="submitForm2(formRef2)"
            :loading="passwordLoading"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit, Search, Plus, EditPen } from "@element-plus/icons-vue";
import {
  roleList,
  addRole,
  deleteRole,
  editRole,
  orgList2,
} from "../../../api/index";
// import { indexMethod } from "../../../utils/tools";
import type { FormInstance, FormRules } from "element-plus";

interface TableItem {
  id: number;
  name: string;
  money: string;
  state: string;
  date: string;
  address: string;
}

const query = reactive({
  roleName: "",
  pageIndex: 1,
  pageSize: 10,
});
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
  roleList({
    pageNumber: query.pageIndex,
    pageSize: query.pageSize,
    roleName: query.roleName,
  }).then((res: any) => {
    tableData.value = res.rows;
    pageTotal.value = res.total || 0;
  });
};
getData();

// 获取组织区域
// const orgList: any = ref([]);
// const getOrgList = () => {
//   orgList2().then((res: any) => {
//     orgList.value = res || [];
//   });
// };
// getOrgList();

// 查询操作
const handleSearch = () => {
  query.pageIndex = 1;
  getData();
};
// 分页导航
const handlePageChange = (val: number) => {
  query.pageIndex = val;
  getData();
};

// 删除操作
const handleDelete = (data: any) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除该角色吗？", "提示", {
    type: "warning",
  })
    .then(() => {
      deleteRole([data.roleId]).then((res: any) => {
        if (res.code === 200) {
          ElMessage.success("删除成功！");
          getData();
        } else {
          ElMessage.error(res.msg);
        }
      });
    })
    .catch(() => {});
};

// 新增用户
const dialogTitle = ref("");
const openDialog = (type: any) => {
  visible.value = true;
  form.roleName = "";
  form.roleSign = "";
  form.remark = "";
  // form.orgName = "";
  // form.orgId = "";
  dialogTitle.value = "新增角色";
};

// 表格编辑时弹窗和保存
const visible = ref(false);
const orgVisible = ref(false);
const formRef = ref<FormInstance>();
const rowData = ref({});
let form = reactive({
  roleName: "",
  roleSign: "",
  remark: "",
  // orgName: "",
  // orgId: "",
});
const rules = reactive<FormRules>({
  roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  roleSign: [{ required: true, message: "请输入角色标识", trigger: "blur" }],
  // remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
  // orgId: [{ required: true, message: "请选择组织区域", trigger: "blur" }],
});
const handleEdit = (index: number, row: any) => {
  form.roleName = row.roleName;
  form.roleSign = row.roleSign;
  form.remark = row.remark;
  // form.orgName = row.orgName;
  // form.orgId = row.orgId;
  dialogTitle.value = "编辑角色";
  rowData.value = row;
  visible.value = true;
};
const saveLoading = ref(false);
const saveUserFn = () => {
  saveLoading.value = true;
  if (dialogTitle.value === "新增角色") {
    addRole({
      roleName: form.roleName,
      roleSign: form.roleSign,
      remark: form.remark,
      // orgName: form.orgName,
      // orgId: form.orgId,
    }).then((res: any) => {
      saveLoading.value = false;
      if (res.code === 200) {
        visible.value = false;
        ElMessage.success("新增成功！");
        getData();
      } else {
        ElMessage.error(res.msg);
      }
    });
  } else {
    editRole({
      ...rowData.value,
      roleName: form.roleName,
      roleSign: form.roleSign,
      remark: form.remark,
      // orgName: form.orgName,
      // orgId: form.orgId,
    }).then((res: any) => {
      saveLoading.value = false;
      if (res.code === 200) {
        ElMessage.success("编辑成功！");
        visible.value = false;
        getData();
      } else {
        ElMessage.error(res.msg);
      }
    });
  }
};
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid: any) => {
    if (valid) {
      saveUserFn();
    } else {
      return false;
    }
  });
};
</script>
<style scoped lang="less">
@import "./index.less";
</style>
